<script setup>
const { proxy } = getCurrentInstance()

const { inspection_item_point_test_mode, inspection_item_inspection_type } =
  proxy.useDict(
    'inspection_item_point_test_mode',
    'inspection_item_inspection_type'
  )

/**
 * 传入数据
 */
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

/**
 * 表单实例
 */
const ruleFormRef = ref(null)

// 表单字段
const ruleForm = reactive({
  instructInfo: '',
  status: '1',
  remark: '',
})

/**
 * 表单校验
 */
const rules = reactive({
  instructInfo: [
    { required: true, message: '请选择计划指令', trigger: 'change' },
  ],
})

/**
 * 提交方法
 */
const submit = async () => {
  const valid = await ruleFormRef.value.validate()
  if (!valid) return false

  return ruleForm
}

/**
 * 初始化数据
 */
const initData = () => {
  if (props.data?.id) {
    Object.keys(props.data).forEach(
      (itemKey) => (ruleForm[itemKey] = props.data[itemKey])
    )
  }
}

/**
 * 回显数据赋值
 */
initData()
defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <!-- 新增 表单 -->
    <el-form
      :model="ruleForm"
      label-width="120px"
      :rules="rules"
      status-icon
      inline
      ref="ruleFormRef"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="计划指令" prop="instructInfo">
            <el-input
              clearable
              v-model="ruleForm.instructInfo"
              :disabled="props.disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <p-switch v-model="ruleForm.status" :disabled="props.disabled" />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="rk">
        <el-form-item label="备注" prop="remark">
          <el-input
            :rows="4"
            type="textarea"
            clearable
            v-model="ruleForm.remark"
            :disabled="props.disabled"
          />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
